﻿@using ZFY.UMC.Identity.Model.Api

@model List<ApiViewModel>

<div id="api">
	<div class="page" >
         @foreach(var api in Model)
    {
        
          <el-card class="box-card" shadow="hover" v-on:click.native.native="openUrl('@api.ApiUrl')">
            <img src="@api.LogoUrl" />
           
            <div class="name">@api.ApiName</div>
          </el-card>
    }
    </div>
    <div>
<el-pagination
  hide-on-single-page="true"
  small
  layout="prev, pager, next"
  :total="@Model.Count"
  v-on:current-change="pageChange"
  :current-page="@Context.Request.Query["pageindex"]"
  page-size="8">
</el-pagination>
    </div>


</div>

@section scripts
{
	<script>
	 

	var api = new Vue({
    el: '#api',
    data: {
    },
    methods: {
         openUrl(url) {
        console.log(url)
        if(url){
            window.location.href = url;
        }
        
      },
      pageChange(page){
          window.location.href = "/api/index?pageindex=" + page;
      }
    }
  })

 </script>
}
@section styles{
    <style>
          .page {
    flex-wrap: wrap;
    display: flex;
    width: 950px;
  }
    .box-card {
    width: 200px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.8);
    margin: 15px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .box-card:hover {
    cursor: pointer;
    background: rgba(255, 255, 255, 1);
  }

  .box-card img {
    width:150px;
    height:150px;
  }
    .el-card__body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
  }

  .name {
    margin: 20px 0 0 0;
        word-break: break-all;
    text-align: center;
  }
  .el-pagination .btn-next,
  .el-pagination .btn-prev {
      background-color: transparent  !important;
  }
  .el-pager li.active {
    color: white;
    cursor: default;
}
.el-pager li:hover {
    color: white;
}
.el-pagination{
    text-align:center
}
  #api .el-pager .number{
      background-color: transparent;
  }
    </style>
}